<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keyword"
            class="ui-w210"
            placeholder="项目名称"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="xmname" label="项目名称"/>
        <el-table-column prop="bdname" label="标段名称"/>
        <el-table-column prop="warningname" label="见证事项"/>
        <el-table-column prop="warningvalue" label="阀值"/>
        <el-table-column prop="warningnum" label="预警值"/>
        <el-table-column prop="warningtime" label="预警时间"/>
        <el-table-column label="操作" align="center" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="viewData(scope.row)"> 查看处理 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <el-dialog title="预警信息" :visible.sync="warninginfo.show" width="60%">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="见证事项" :span="2">{{warninginfo.info.warningname}}</el-descriptions-item>
        <el-descriptions-item label="阀值">{{warninginfo.info.warningvalue}}</el-descriptions-item>
        <el-descriptions-item label="预警值">{{warninginfo.info.warningnum}}</el-descriptions-item>
        <el-descriptions-item label="预警时间" :span="2">{{warninginfo.info.warningtime}}</el-descriptions-item>
        <el-descriptions-item label="处理记录" :span="2">{{warninginfo.info.content}}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{warninginfo.info.clusername}}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{warninginfo.info.cltime}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import { ycllist } from "../../../../../api/weeon/warninginfo/warninginfo";
export default {
  data() {
    // 这里存放数据
    return {
      childType: "",
      editTempl: false,
      btnLoading: false,
      tableData: [],
      tableLoading: false,
      pageObj: {
        total: 0,
        currentPage: 0,
        pageSize: 10,
        pageSizes: [10, 20, 30]
      },
      searchForm: {
        keyword: ""
      },
      warninginfo: {show: false,info: {}},
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.projectListFn();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  methods: {
    //取消
    cancel(formName) {
      this.editTempl = false;
      this.childType = "";
      this.tableLoading = false;
      this.btnLoading = false;
      this.templForm ={};
      this.$refs[formName].resetFields();
      this.projectListFn();
      // this.roomDeviceShow = false;
    },
    clData(row) {
      this.editTempl = true;
      this.templForm = row;
      this.childType = "edit";
    },
    viewData(row){
      this.warninginfo.show = true;
      this.warninginfo.info = row;
    },
    // 数据列表
    async projectListFn() {
      try {
        this.tableLoading = true;
        this.tableData = [];
        let params = {
          keyword: this.searchForm.keyword,
          pageNo: this.pageObj.currentPage,
          pageSize: this.pageObj.pageSize
        };
        const res = await ycllist(params);
        this.tableLoading = false;
        if (res.stat === 1) {
          if (res.data.page.totalElements === 0 && this.pageObj.currentPage !== 0) {
            this.pageObj.currentPage = 0;
            this.$nextTick(() => {
              this.projectListFn();
            });
            return;
          }
          this.tableData = res.data.page.content;
          this.pageObj.total = res.data.page.totalElements;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      } catch (error) {
        console.log(error);
        this.tableLoading = false;
      }
    },
    handleSearch() {
      this.pageObj.total = 0;
      this.pageObj.currentPage = 0;
      this.projectListFn();
    },
  }
}
</script>
<style lang="scss" scoped>
.status-list {
  padding-top: 18px;
  span {
    padding-left: 20px;
    font-size: 12px;
    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -2px;
    }
  }
  .completed::before {
    background-color: #56b502;
  }
  .inWitness::before {
    background-color: #1890ff;
  }
  .notStarted::before {
    background-color: #b2b2b2;
  }
}
::v-deep.progress-list {
  .el-step {
    height: 26px;
    line-height: 26px;
    &::before {
      border-width: 13px;
    }
    &::after {
      border-width: 13px;
      right: -26px;
    }
    .cell {
      padding: 0 6px;
    }
    .el-step__title {
      line-height: 26px;
      text-align: center;
      i {
        color: #fc9306;
        // background-color: #fff;
      }
    }
  }
  // 已完成状态
  .status-completed {
    cursor: pointer;
    background: rgba(86, 181, 2, 0.2);
    &::after {
      border-left-color: rgba(86, 181, 2, 0.2);
    }
    .el-step__title {
      color: #56b502;
    }
  }
  .status-completed:hover {
    background: rgba(86, 181, 2);
    &::after {
      border-left-color: rgba(86, 181, 2);
    }
    .el-step__title {
      color: #fff;
    }
  }
  // 见证中状态
  .status-inWitness {
    cursor: pointer;
    background: rgba(24, 144, 255, 0.2);
    &::after {
      border-left-color: rgba(24, 144, 255, 0.2);
    }
    .el-step__title {
      color: #1890ff;
    }
  }
  .status-inWitness:hover {
    background: rgba(24, 144, 255);
    &::after {
      border-left-color: rgba(24, 144, 255);
    }
    .el-step__title {
      color: #fff;
    }
  }
  // 未开始状态
  .status-notStarted {
    background: rgba(153, 153, 153, 0.2);
    &::after {
      border-left-color: rgba(153, 153, 153, 0.2);
    }
  }
}
</style>
